<template>
	<view class="container">
		<!-- <tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#0C83CC" sliderBgColor="#0C83CC"
		 @change="change"></tui-tabs> -->
		<view :class="{'tui-order-list':scrollTop>=0}">
			<view class="tuiTips" style="margin-top: 40%;" v-if="rareData.length == 0" >
				<tui-tips :fixed="false" imgUrl="/static/toast/img_nodata.png">暂时还没有内容</tui-tips>
			</view>
			<view v-if="tabStatus == 0" class="content_view">
				<view class="content_screen">
					<!-- <view class="content_type" @click="openActionSheet()">
						<span class="sort_span">是否帮卖</span>
						<image class="sort_icon" style="width: 24rpx;height: 24rpx;margin-top: 38rpx;" src="../../static/my/icon/right_arrow.png"></image>
					</view> -->
					<view class="content_type" @click="state('create_time')">
						<span class="sort_span">加入时间</span>
						<image class="sort_icon" src="../../static/my/icon/sort_icon.png"></image>
					</view>
					<!-- <view class="content_type" @click="state('pre_sell_amount')">
						<span class="sort_span">支付金额</span>
						<image class="sort_icon" src="../../static/my/icon/sort_icon.png"></image>
					</view> -->
					<!-- <view class="content_type" @click="state('pre_sell_comm')">
						<span class="sort_span">积累佣金</span>
						<image class="sort_icon" src="../../static/my/icon/sort_icon.png"></image>
					</view> -->
				</view>
				<view class="content_search_waikuang">
					<view class="content_search">
						<image class="search_image" src="../../static/my/icon/search.png"></image>
						<input v-model="search_nickname" @blur="onSubmite()" placeholder="搜索微信名称"/>
					</view>
				</view>
				<view class="content_list">
					<view class="frame" v-for="(item, index) in rareData" :key="index">
						<view class="frame_left">
							<image v-if="item.imageurl" :src="item.imageurl"></image>
							<image v-else src="../../static/my/my_one.png" style="background: #CFCFCF;" mode="widthFix"></image>
						</view>
						<view class="frame_right">
							<view class="frame_right_top">
								<view class="frame_right_top_name">{{item.nickname}}</view>
								<view class="frame_right_top_time">{{formatDate(item.create_time)}}加入</view>
							</view>
							<view class="frame_right_bottom">
								<view style="float: left;" v-if="item.sell_status == '1'">
									<image class="frame_right_bottom_bang" src="../../static/my/icon/group.png"></image>
								</view>
								<view style="float: right;padding-right: 10rpx;margin-right: 10rpx;">
									<image class="sort_icon" src="../../static/my/icon/shape.png"></image>
									<span class="sort_span">{{centsToYuan(item.pre_sell_comm > 0 ? item.pre_sell_comm : '0')}}</span>
								</view>
								<view style="float: right;padding-right: 10rpx;margin-right: 10rpx;">
									<image class="sort_icon" src="../../static/my/icon/wechatpay.png"></image>
									<span class="sort_span">{{centsToYuan(item.pre_sell_amount > 0 ? item.pre_sell_amount : '0')}}</span>
								</view>
								<view style="float: right;padding-right: 10rpx;margin-right: 10rpx;">
									<image class="sort_icon" src="../../static/my/icon/theorder.png"></image>
									<span class="sort_span">{{item.pre_sell_count > 0 ? item.pre_sell_count : '0'}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else >
				<view class="istarted" v-for="(item, index) in rareData" :key="index" >
					<view class="istarted_nr">
						<view v-if="item.status == 1" class="istarted_top">
							<view class="istarted_top_status"><span style="color:#1193E3;">·</span> 接龙进行中</view>
						</view>
						<view v-else class="istarted_top">
							<view class="istarted_top_status"><span style="color:#999;">·</span> 接龙已结束</view>
						</view>
						<view class="istarted_title">
							<view class="istarted_title_name">{{item.title}}</view>
						</view>
						<view class="istarted_bottom">
							<view class="istarted_bottom_left">
								<view>销售订单：{{item.pre_sell_count ? item.pre_sell_count : '0' }}</view>
								<view>积累佣金：{{centsToYuan(item.pre_sell_comm ? item.pre_sell_comm : '0' )}}</view>
								<view>已结算佣金：{{centsToYuan(item.sell_comm ? item.sell_comm : '0' )}}</view>
							</view>
							<view class="istarted_bottom_right">
								<view>销售金额：{{centsToYuan(item.pre_sell_amount ? item.pre_sell_amount : '0' )}}</view>
								<view>帮卖佣金：{{tui.rate(item.jielong_sell_comm ? item.jielong_sell_comm : '0' )}}%</view>
								<view>待结算佣金：{{centsToYuan(item.pre_sell_comm - item.sell_comm)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 接龙案例 -->
		</view>
	
		<!--加载loadding-->
			<tui-loadmore :visible="loadding" :index="3" type="red" v-if="empty == 1"></tui-loadmore>
			<tui-nomore :visible="!pullUpOn"  v-if="empty == 1"></tui-nomore>
		<!--加载loadding-->
		<!--toast提示-->
			<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
			<button open-type="getUserInfo"  v-if="userInfo === ''" class="tui-login-full" @getuserinfo="wxGetUserInfo" withCredentials="true" lang="zh_CN"></button>
		
		<!-- 是否帮卖选择操作事件 -->
			<tui-actionsheet :show="showActionSheet" :item-list="itemList" :mask-closable="maskClosable" :color="color" :size="size" :is-cancel="isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
			<button open-type="getUserInfo"  v-if="userInfo === ''" class="tui-login-full" @getuserinfo="wxGetUserInfo" withCredentials="true" lang="zh_CN" :disabled="isDisable"></button>
		<!-- 是否帮卖选择操作事件 -->
		
		<!-- 单独团员操作选择操作事件 -->
			<tui-actionsheet :show="showActionSheet_members" :item-list="itemList" :mask-closable="maskClosable" :color="color" :size="size" :is-cancel="isCancel" @click="itemClick_members" @cancel="closeActionSheet_members"></tui-actionsheet>
			<button open-type="getUserInfo"  v-if="userInfo === ''" class="tui-login-full" @getuserinfo="wxGetUserInfo" withCredentials="true" lang="zh_CN" :disabled="isDisable"></button>
		<!-- 单独团员操作选择操作事件 -->
	</view>
</template>

<script>
	const dataTime = require('../../utils/util.js');
	import tuiTips from "@/components/extend/tips/tips"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiActionsheet from "@/components/actionsheet/actionsheet"
	
	export default{
		components: {
			tuiTips,
			tuiLoadmore,
			tuiNomore,
			tuiToast,
			tuiActionsheet
		},
		data() {
			return {
				userInfo: '',
				tabs: [
					{
						name: "团员列表"
					}, 
					// {
					// 	name: "我发起的帮卖"
					// },
				],
				tabStatus: 0,
				empty: 1,
				statusList: [],
				currentTab: 0,
				page_size: 10,
				page: 1,
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				rareData: [],
				searchVal: '',
				fansList_type: 'fans',
				sell_status: '0',
				search_nickname: '',
				fansList_order: '',
				fansList_order_spare: '',
				order_state: true,
				
				showActionSheet: false,
				showActionSheet_members: false,
				maskClosable: true,
				tips: "",
				itemList: [],
				color: "#9a9a9a",
				size: 26,
				isCancel: true,
				members_sell_status: '',
			}
		},
		onLoad: function(option){
			if(option.tab ){
				this.currentTab = option.tab
				this.setTab(option.tab)
			}
			// this.config = uni.getStorageSync('publicConif');
			wx.hideShareMenu();
		},
		onShow: function() {
			// this.loadData();
			this.userInfo = uni.getStorageSync('userInfo')
			if(this.userInfo){
				this.loadData();		
			}else{
				this.empty = 0
				this.loadding = false
				this.pullUpOn = false
			}
		}, 
		methods: {
			centsToYuan: function(amount){
				return this.tui.centsToYuan(amount);
			},
			// 点击事件
			change: function(e) {
				this.currentTab = e.index
				if(!this.userInfo){
					return false
				}
				this.page = 1
				this.loadding = false
				this.pullUpOn = true
				this.rareData = []
				this.setTab(e.index)
				this.loadData();
			},
			// 改状态
			setTab: function(index){
				if(index == 0){
					this.tabStatus = 0;
				}else if(index == 1){
					this.tabStatus = 1;
				}
			},
			// 查询我团员
			// 参数  type【类型，fans：我的粉丝，share：我邀请的人】  sell_status【帮卖状态】，nickname【昵称】
			// order【排序 】
			// create_time desc / asc    //时间排序
			// pre_sell_amount  desc / asc   //支付金额排序
			// pre_sell_comm  desc / asc   //支付金额排序
			loadData:function() {
				let that = this;
				if(that.tabStatus == 0){
					that.tui.request_false('user/fansList',{
						type: this.fansList_type,
						sell_status: this.sell_status,
						nickname: this.search_nickname,
						order: this.fansList_order,
						page: this.page,
						page_size: this.page_size,
					}).then((res) => {
						if(res.code == '0000'){
							if(res.list.list.length > 0){
								that.loadding = false
								that.pullUpOn = true
								that.empty = 1
								that.page++;
								for( let i = 0; i < res.list.list.length; i++ ){
									that.rareData.push(res.list.list[i])
								}
							}else{
								that.loadding = false;
								that.pullUpOn = false;
							}
							if(res.list.list.length == 0 &&  that.page == 1){
								that.empty = 0;
							}
						}else{
							let params = {
								title: "请登陆",
								imgUrl: "/static/toast/info-circle.png",
								icon: true
							};
							that.$refs.toast.show(params);
						}
					}).catch((err) => {
						let params = {
							title: "服务器异常",
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
					})
				}else{
					that.tui.request_false('user/sellJielong',{
						page: this.page,
						page_size: this.page_size,
					}).then((res) => {
						if(res.code == '0000'){
							// console.log('details',JSON.parse(res['list']['list']['0']['details']));
							if(res.list.list.length > 0){
								that.loadding = false
								that.pullUpOn = true
								that.empty = 1
								that.page++;
								for( let i = 0; i < res.list.list.length; i++ ){
									that.rareData.push(res.list.list[i])
								}
							}else{
								that.loadding = false;
								that.pullUpOn = false;
							}
							if(res.list.list.length == 0 &&  that.page == 1){
								that.empty = 0;
							}
							console.log('返回内容',this.rareData);
						}else{
							let params = {
								title: "请登陆",
								imgUrl: "/static/toast/info-circle.png",
								icon: true
							};
							that.$refs.toast.show(params);
						}
					}).catch((err) => {
						let params = {
							title: "服务器异常",
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
					})
				}
			},
			// 时间戳转换
			formatDate: function (timestamp) {
				return dataTime.getDateDiff(timestamp)
			},
			// 状态切换并排序
			state: function(state){
				this.page = 1;
				if(this.fansList_order_spare == state){
					var order_state_sorting = this.order_state == true ? 'asc' : 'desc';
					this.fansList_order = state + ' ' + order_state_sorting;
					this.fansList_order_spare = state;
					this.order_state = !this.order_state;
					console.log(this.order_state,this.fansList_order);
				}else{
					this.fansList_order = state + ' ' + 'asc';
					this.fansList_order_spare = state;
					this.order_state = false;
				}
				this.rareData = [];
				this.loadData();
			},
			// 单独团员操作
			openActionSheet_members: function (user_id,index,sell_status){
				
				var sell_status_name = sell_status == '1'? '取消帮卖团长' : '成为帮卖团长';
				this.members_user_id = user_id;
				this.members_index = index;
				this.members_sell_status = sell_status;
				
				let itemList = [{
					text: "查看帮卖记录",
					color: "#1a1a1a"
				}, {
					text: sell_status_name,
					color: "#1a1a1a"
				}]
				setTimeout(() => {
					this.showActionSheet_members = true;
					this.itemList = itemList;
					this.maskClosable = true;
					this.tips = '';
					this.color = "#9a9a9a";
					this.size = 26;
					this.isCancel = true
				}, 0)
			},
			closeActionSheet_members: function() {
				this.showActionSheet_members = false
			},
			itemClick_members: function(e) {
				let index = e.index;
				let then = this;
				console.log(index);
				if(index == 0){
					console.log(this.members_user_id);
					var url = '../index/the_details?uid=' + this.members_user_id;
					uni.navigateTo({
					    url:url,
					});
				}else if(index == 1){
					var sell_status = this.members_sell_status == '1' ? '2' : '1';
					
					this.tui.request_false('user/fansSellStatus',{
						user_id: this.members_user_id,
						sell_status: sell_status,
					}).then((res) => {
						console.log(res);
						if(res.code == '0000'){
							
							this.rareData[this.members_index]['sell_status'] = sell_status;
						}else{
							let params = {
								title: res.msg,
								imgUrl: "/static/toast/info-circle.png",
								icon: true
							};
							this.$refs.toast.show(params);
						}
					}).catch((err) => {
						let params = {
							title: "服务器异常",
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						this.$refs.toast.show(params);
					})
				}
				this.closeActionSheet_members();
			},
			// 是否帮卖查询
			openActionSheet: function(type) {
				let itemList = [{
					text: "全部",
					color: "#1a1a1a"
				}, {
					text: "已帮卖",
					color: "#1a1a1a"
				}, {
					text: "未帮卖",
					color: "#1a1a1a"
				}]
				setTimeout(() => {
					this.showActionSheet = true;
					this.itemList = itemList;
					this.maskClosable = true;
					this.tips = '';
					this.color = "#9a9a9a";
					this.size = 26;
					this.isCancel = true
				}, 0)
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			itemClick: function(e) {
				let index = e.index;
				let then = this;
				console.log(index);
				if(index == 0){
					then.sell_status = '0';
					this.rareData = [];
					this.page = 1;
					this.loadData();
				}else if(index == 1){
					then.sell_status = '1';
					this.rareData = [];
					this.page = 1;
					this.loadData();
				}else if(index == 2){
					then.sell_status = '2';
					this.rareData = [];
					this.page = 1;
					this.loadData();
				}
				then.closeActionSheet();
			},
			// input 输入结束事件
			onSubmite: function(e){
				this.rareData = [];
				this.page = 1;
				this.loadData();
			},
			onReachBottom: function() {
				console.log('下拉事件');
				if(this.pullUpOn == true){
					this.loadData();
				}
			},
			wxGetUserInfo: function() {
				let that = this;
				if(this.isDisable == true){
					let params = {
						title: "请勿重复操作",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				}else{
					this.isDisable = true
					that.tui.wxLogin().then((res)=>{
						if(res.code == '0000'){
							this.Whetherthelogin = true;
							this.rareData = [];
							this.page = 1;
							this.loadding = false;
							this.pullUpOn = true;
							this.empty = 1;
							this.currenttime = new Date().getTime();
							this.Rendering_ID = 2004;
							that.userInfo = res;
							this.leaguemember();
							this.organizations();
							that.getAccount();
							this.loadData();
						}
					});
				}
				
				
				
				setTimeout(() => {
					this.isDisable = false
				}, 3000)
			},
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	/* tab */
	.tui-tabs-active{
		color: #0C83CC !important;
		font-weight: 400;
	}
	.tui-tabs-slide{
		background: #0C83CC !important;
	}
	.tui-order-list {
		/* margin-top: 80rpx; */
		/* padding-bottom: 100rpx; */
		/* background-color: #FFF; */
	}
	.colorLan{
		color: #0a8fe2 !important;
		font-size: 35rpx !important;
		font-weight: 500 !important;
	}
	.tui-tabs-item{
		width: 50% !important;
	}
	/* tab */
	
	/* 列表样式 */
	.content_view{
		background-color: #FFF;
	}
	
	.content_screen{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		top: 0rpx;
		background: #FFF;
		z-index: 999;
	}
	
	.content_type{
		width: 100%;
		text-align: center;
		float: left;
		font-size: 28rpx;
		color: #666;
	}
	
	.content_search_waikuang{
		position: fixed;
		top: 100rpx;
		z-index: 999;
		height: 120rpx;
		width: 100%;
		background-color: #FFF;
	}
	
	.content_search{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		width: 90%;
		background-color: #F3F3F3;
		margin: 0 auto;
		border-radius: 5rpx;
	}
	
	.content_search input{
		height: 80rpx;
		line-height: 80rpx;
		width: 60%;
		text-align: left;
		padding-left: 10rpx;
		background: #F3F3F3;
		/* margin-top: 10rpx;
		margin: 0 auto; */
	}
	
	.search_image{
		width: 20px;
		height: 40rpx;
		float: left;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	
	.sort_icon{
		width: 38rpx;
		height: 38rpx;
		float: right;
		margin-top: 30rpx;
		padding-right: 10rpx;
	}
	
	.sort_span{
		/* float: left; */
		margin-left: 24rpx;
	}
	
	.content_list{
		margin-top: 220rpx;
	}
	
	.frame{
		height: 200rpx;
		border-bottom: 1rpx solid #E8E8E8;
		width: 100%;
	}
	
	.frame_left{
		width: 26%;
		text-align: center;
		height: 200rpx;
		float: left;
	}
	
	.frame_left image{
		width: 130rpx;
		height: 130rpx;
		margin-top: 35rpx;
		border-radius: 10rpx;
	}
	
	.frame_right{
		width: 71%;
		float: left;
		/* padding-right: 10rpx; */
	}
	
	.frame_right_top{
		width: 100%;
		height: 112rpx;
		line-height: 112rpx;
	}
	
	.frame_right_top_name{
		width: 55%;
		float: left;
		line-height: 112rpx;
		font-size: 30rpx;
	}
	
	.frame_right_top_time{
		width: 40%;
		float: right;
		font-size: 26rpx;
		text-align: right;
		padding-right: 24rpx;
		color: #999999;
		line-height: 112rpx;
	}
	
	.frame_right_bottom{
		width: 100%;
		height: 88rpx;
		display: none;
	}
	
	.frame_right_bottom_bang{
		width: 30rpx;
		height: 30rpx;
		float: left;
		margin-top: 10rpx;
	}
	
	.frame_right_bottom .sort_span{
		float: right;
		margin-top: 10rpx;
		margin-left: 2rpx;
		/* width: 30rpx; */
		height: 30rpx;
		color: #999;
	}
	
	.frame_right_bottom .sort_icon{
		float: left;
		margin-top: 16rpx;
		width: 30rpx;
		height: 30rpx;
	}
	
	/* 我发起的帮卖css */
	.istarted{
		width: 90%;
		background: #fff;
		padding: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	
	.istarted_top_status{
		line-height: 70rpx;
		font-size: 24rpx;
		line-height: 70rpx;
	}
	
	.istarted_top_status span{
		font-size: 40rpx;
		float: left;
		margin-right: 10rpx;
	}
	
	.istarted_title{
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.istarted_bottom{
		height: 164rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 58rpx;
	}
	
	.istarted_bottom_left{
		width: 50%;
		float: left;
	}
	
	.istarted_bottom_right{
		width: 50%;
		float: right;
	}
	
	.istarted_bottom_left view{
		height: 58rpx;
	}
	
	.istarted_bottom_right view{
		height: 58rpx;
	}
</style>
